Attendance monitoring is in place. It is your responsability to ensure that you have signed yourself in.
After completing this worksheet you will be able to:
*Using Unreal Engine 4.22.3
The only files you will need to complete this tutorial are the health bar background and fill:
Right click and save
Right click and save
Because this tutorial uses the c++ FPS starter template. Unreal generates a lot of useful files for us and names them based on what we called the project. For this reason, the name of the files in the tutorial might ne named differently. This tutorial uses a generic file name so where the file in question might be called UIDemoCharacter.cpp it will be referred to as the Character .cpp. This allows for the abiguity when it comes to how you named the project.
UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "Health")
float Health;
UFUNCTION(BlueprintPure, Category = "Health")
float GetHealth();
UFUNCTION(BlueprintPure, Category = "Health")
FText GetHealthIntText();
add the new methods to the .cpp using the quick actions shortcut:
Open up the Character .cpp and in the BeginPlay method set the health
Health = 1000.0f;
It should look like this:
Now populate the auto generated methods: GetHealth and GetHealthIntText
float AUIDemoCharacter::GetHealth()
{
return Health / 1000;
}
FText AUIDemoCharacter::GetHealthIntText()
{
int32 HP = FMath::RoundHalfFromZero(Health / 100);
FString HPS = FString::FromInt(HP);
FString HealthHUD = HPS + FString(TEXT("%"));
FText HPText = FText::FromString(HealthHUD);
return HPText;
}
Before we can start manipulating UI in c++ we need to add some resources to the projects build.cs
"UMG", "Slate", "SlateCore"
It should now look like this:
Update the public and private sections to look like this:
public:
AUIDemoHUD();
/** Primary draw call for the HUD */
virtual void DrawHUD() override;
virtual void BeginPlay() override; // new
private:
/** Crosshair asset pointer */
class UTexture2D* CrosshairTex;
// new
UPROPERTY(EditAnywhere, Category = "Health")
TSubclassOf<class UUserWidget> HUDWidgetClass;
// new
UPROPERTY(EditAnywhere, Category = "Health")
class UUserWidget* CurrentWidget;
};
#include "Blueprint/UserWidget.h"
static ConstructorHelpers::FClassFinder<UUserWidget> HealthBarObj(TEXT("/Game/FirstPerson/UI/Health_UI"));
HUDWidgetClass = HealthBarObj.Class;
Now add this code below to the BeginPlay method
Super::BeginPlay();
if (HUDWidgetClass != nullptr) {
CurrentWidget = CreateWidget<UUserWidget>(GetWorld(), HUDWidgetClass);
if (CurrentWidget) {
CurrentWidget->AddToViewport();
}
}
Compile and play your project. ‘Hello World’ should now be display, loud and proud for all to see!
Now we are going to create the health bar in the HUD.
Convert the fill and background graphics to sprites
The canvas should look like this:
With the ‘Progress Bar’ selected, add the fill and background sprites in the Details -> Style panel.
It Should look like this:
You should now be able to test the progress bar by adjusting the value of ‘percent’ in the progress panel.
Next we need to bind the Health Variable from our Player class to the percentage of the health widget.
Match your new blueprint to the image below.
To test that the binding works we can write a simple timer loop that modifies the Health variable incrementally. This is purely to test the functionality. If you were writing a proper game then you would probably have an external source apply damage to the player and this would modify the player’s health.
To test the binding, first open the player .cpp and add the code below to the public section
FTimerHandle IncrementHandle;
void incrementHealth();
Now open the player .cpp
#include "TimerManager.h"
GetWorldTimerManager().SetTimer(IncrementHandle, this, &AUIDemoCharacter::incrementHealth, 0.1f, true, 0.2f);
void AUIDemoCharacter::incrementHealth()
{
UE_LOG(LogTemp, Warning, TEXT("HEALTH"));
Health += 10;
if (Health > 1000) Health = 0;
}
Compile the game and PLAY!
You should see the health bar scrolling up and then reseting.